import { Modal as AntdModal, ModalProps } from 'antd';
import cx from 'classnames';
import React from 'react';
import { Button } from '../index';
import { CloseIcon } from '../Svg';
import { isNull } from '../utils';

export interface Props extends ModalProps {
  isShowFooterBorder?: boolean;
  children?: React.ReactNode;
}

function Modal(props: Props) {
  const {
    isShowFooterBorder,
    className,
    confirmLoading,
    footer,
    ...modalProps
  } = props;
  const antdProps = {
    closeIcon: <CloseIcon />,
    footer:
      !!footer || isNull(footer)
        ? footer
        : [
            <Button key="cancel" onClick={props.onCancel}>
              取消
            </Button>,
            <Button
              key="confirm"
              type="primary"
              loading={confirmLoading}
              onClick={props.onOk}
            >
              确认
            </Button>,
          ],
    confirmLoading,
    ...modalProps,
  };
  return (
    <AntdModal
      {...antdProps}
      className={cx({ 'ant-modal-box': !isShowFooterBorder }, className)}
    />
  );
}
Modal.displayName = 'StongModal';

export default Modal;
